<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';

onMounted(() => {
  // 初始化
  CesiumInit();
});

const CesiumInit = async () => {
  // 创建 Cesium Viewer 实例并配置相关参数
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 使用 Cesium Ion 资源加载日本区域的地形数据
    terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(2767062),
    // 隐藏导航帮助按钮
    navigationHelpButton: false,
    // 隐藏 Home 按钮
    homeButton: false,
    // 隐藏场景模式选择器
    sceneModePicker: false,
    // 隐藏动画控件
    animation: false,
    // 隐藏时间轴控件
    timeline: false,
    // 隐藏搜索控件
    geocoder: false,
    // 隐藏底图选择器
    baseLayerPicker: false,
    // 隐藏全屏按钮
    fullscreenButton: false,
    // 隐藏 VR 按钮
    vrButton: false,
    // 去掉版权信息
    creditContainer: document.createElement('div')
  });

  // 获取场景对象
  const scene = viewer.scene;
  // 启用地形深度检测，确保建筑物正确显示在地形上
  scene.globe.depthTestAgainstTerrain = true;

  try {
    // 使用 Cesium Ion 资源加载日本建筑数据集
    const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2602291);
    // 将加载的 3D Tileset 添加到场景中
    scene.primitives.add(tileset);
    // 将相机视角调整到 3D Tileset 的合适位置
    await viewer.zoomTo(tileset);
  } catch (error) {
    // 捕获并打印加载过程中可能出现的错误
    console.log(error);
  }

  // 定义广岛的兴趣点的相机位置和方向
  const hiroshima = {
    destination: new Cesium.Cartesian3(
      -3558117.165209301,
      3887175.058311886,
      3582090.381367681,
    ),
    orientation: {
      direction: new Cesium.Cartesian3(
        0.915045649098936,
        -0.16130516440787898,
        0.3696919041586574,
      ),
      up: new Cesium.Cartesian3(
        -0.20924973638933655,
        0.5937271886242537,
        0.7769829942214522,
      ),
    },
  };

  // 初始将相机飞到广岛的位置
  scene.camera.flyTo(hiroshima);

  // 设置一个从相机方向发出的定向光源，以突出显示建筑物
  const cameraLight = new Cesium.DirectionalLight({
    direction: scene.camera.directionWC, // 方向随相机方向更新
    intensity: 2.0,
  });
  // 启用地球表面的光照效果
  scene.globe.enableLighting = true;
  // 禁用大气层从太阳发出的动态光照
  scene.globe.dynamicAtmosphereLightingFromSun = false;
  // 禁用大气层的动态光照效果
  scene.globe.dynamicAtmosphereLighting = false;
  // 将光源应用到场景中
  scene.light = cameraLight;

  // 在场景预渲染阶段更新光源的方向，使其始终与相机方向一致
  scene.preRender.addEventListener(function (scene, time) {
    scene.light.direction = Cesium.Cartesian3.clone(
      scene.camera.directionWC,
      scene.light.direction,
    );
  });
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

html,
body,
#cesiumContainer {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>